<template>
	<div>
    <div class="layer_top">
      <div class="name-area"><span class="names">用户姓名：</span>{{ dataBus.userName }}</div>
      <div class="name-area"><span class="names">联系电话：</span>{{ dataBus.userMobile }}</div>
    </div>
    <hr style="margin: 15px 0">
    <Form>
      <FormItem label="请选择岗位">
        <Select v-model="roleCode" style="width:200px">
          <Option
            v-for="(item, index) in postRoleArray"
            :key="index"
            :value="item.roleCode">{{ item.roleName }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="添加权限">
        <CheckboxGroup v-model="bizRoleSelector">
          <Checkbox v-for="(item, index) in bizRoleArray" :key="index" :label="item.bizRoleCode">
            <span>{{item.bizRoleName}}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
    </Form>
    <Button type="primary" @click="Submit">提交</Button>
  </div>  
</template>

<script scope>
export default {
  props: {
    dataBus: Object,
    callbank: Function
  },
  data () {
    return {
      roleCode: null,
      bizRoleArray: [],
      bizRoleSelector: [],
      postRoleArray: [],
      dataForm: {}
    }
  },
  methods: {
    Init() {
      this.getBizRole()
      this.getPostRole()
      this.$nextTick(() => {
        //勾选业务权限
        if(this.dataBus.authCode) {
          this.bizRoleSelector = this.dataBus.authCode.split(',')
        }
        if(this.dataBus.roleCode) {
          this.roleCode = this.dataBus.roleCode
        }
      })
    },
    //授权角色
    Submit(){
      this.dataForm.shopUserId = this.dataBus.shopUserId
      if(this.bizRoleSelector.length > 0) {
        this.dataForm.authCode = this.bizRoleSelector.toString()
      }
      this.postRoleArray.forEach(element => {
        if(element.roleCode === this.roleCode) {
          this.dataForm.roleCode = element.roleCode
          this.dataForm.userPost = element.roleName
        }
      })
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/shop/employee",
        data: {
          pojo: this.dataForm
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '授权成功',
              duration: 1,
              onClose: ()=> {
                this.callbank()
              }
            })
          } else {
            this.$Notice.warning({
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).put()
    },
    getBizRole() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/biz/role/page',
        query: {
          pageIndex: 1,
          pageSize: 30
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.bizRoleArray = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    getPostRole() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/user/role/page',
        query: {
          pageIndex: 1,
          pageSize: 30
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.postRoleArray = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
  }
}
</script>
<style lang="less" scoped>
.layer_top {
  display: flex; flex-wrap: wrap;
}
.name-area {
  padding: 3px 0; width: 33%;
}
.names {
  width: 100px; font-weight: 800; display: inline-block;
}
</style>